<template>
  <transition appear name="side_anime">
    <div>
      <!-- <view>{{result}}</view> -->
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div class="btn">
        <div class="date1">
          <el-form ref="appointForm" :inline="true" :model="appointForm" class="demo-form-inline">
            <el-form-item prop="selectDate">
                <el-date-picker
                    v-model="appointForm.selectDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" icon="el-icon-thumb" @click="drawLine1()">获 取</el-button>
          </el-form-item>
          </el-form>
        </div>
        <div class="date2">
          <el-form ref="billForm" :inline="true" :model="billForm" class="demo-form-inline">
            <el-form-item prop="selectDate">
                <el-date-picker
                    v-model="billForm.selectDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" icon="el-icon-thumb" @click="drawLine2()">获 取</el-button>
          </el-form-item>
          </el-form>
        </div>
      </div>
      
      <div id="myChart1" style="width: 50%;height:400px;"></div>
      <div id="myChart2" style="width: 50%;height:400px;"></div>
      <div class="days">
        <el-form ref="daysForm" :model="daysForm" label-width="80px">
          <el-form-item prop="days">
            <el-select v-model="daysForm.days" placeholder="请选择时段" style="width:50%" clearable>
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-thumb" @click="drawLine3()">获 取</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="myChart3" style="width: 100%;height:400px;"></div>

      <div class="days">
        <el-form ref="daysForm2" :model="daysForm2" label-width="80px">
          <el-form-item prop="days">
            <el-select v-model="daysForm2.days" placeholder="请选择时段" style="width:50%" clearable>
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-thumb" @click="drawLine4()">获 取</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="myChart4" style="width: 100%;height:400px;"></div>
    </div>
  </transition>
</template>

<script>
import he from 'element-plus/packages/locale/lang/he'
import {appointmentDetails, daysAppInfo, daysBillInfo} from '../../api/api'
import {billDetails} from '../../api/api'

export default {
  inject:['reload'],
  name: 'hello',
  data () {
    //接收当前时间
    const currentDate = this.getDate({
      format: true
    })
    return {
      msg: 'Welcome to Your Vue.js App',
      result: currentDate,
      appointForm:{
        selectDate:this.getDate()
      },
      billForm:{
        selectDate:this.getDate()
      },
      daysForm:{
        days:"7"
      },
      daysForm2:{
        days:"7"
      },
      options:[
        {
          value: '7',
          label: '近7天',
        },
        {
          value: '14',
          label: '近14天',
        },
        {
          value: '30',
          label: '近30天',
        },
      ],
      value: ''
    }
  },

  mounted(){
    this.drawLine1();
    this.drawLine2();
    this.drawLine3();
    this.drawLine4();
  },

  methods: {
    drawLine1(){
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'))

        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let header = {
          'satoken':token
        }
        let data = {
          // 'date':this.result
          'date':this.appointForm.selectDate
        }
        // console.log(this.appointForm.selectDate)
        // console.log(data)
        var xData = [];
        var yData = [];

        //获取挂号数据
        appointmentDetails(data,header).then(response => {
          // console.log('请求成功',response)
          // var length = response.data.appInfo.length
          if (response.ret == '0'){
            let arr = response.data.appInfo
            // console.log(response.data)
            arr.forEach((item) => {
              xData.push(item.subject);
              yData.push(item.count)
            });
            // for (var i = 0; i<length;i++) {
            //   if(response.data.appInfo[i]['subject'] !== null) {
            //       xData.push(response.data.appInfo[i]['subject'])
            //   }
            //   if(response.data.appInfo[i]['count'] !== null) {
            //       yData.push(response.data.appInfo[i]['count']);
            //   }
            // }
            // console.log(xData)
            // console.log(yData)
            // 绘制图表
            myChart1.setOption({
              title: { text: '各科室挂号人数（人）/日' },
              tooltip: {},
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              xAxis: {
                  data: xData,
              },
              yAxis: {},
              series: [{
                  name: '挂号人数',
                  type: 'bar',
                  data: yData
              }]
            })
          }else {
            this.$message({
              message:'获取数据失败',
              type: 'error',
              showClose:true
            })
          }
        });

    },

    drawLine2(){
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))

      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      let data = {
        // 'date':this.result
        'date':this.billForm.selectDate
      }

      var xData = [];
      var yData1 = [];
      var yData2 = [];

      console.log(data)

      //获取财务数据
      billDetails(data,header).then(response => {
        console.log('请求成功',response)
        // var length = response.data.billInfo.length
        if (response.ret == '0'){
          console.log(response.data)
          let arr = response.data.billInfo
          arr.forEach((item) => {
            xData.push(item.subject);
            yData1.push(item.price);
            yData2.push(item.appo_price)
          });
          // for (var i = 0; i<length;i++) {
          //   if(response.data.billInfo[i]['subject'] !== null) {
          //       xData.push(response.data.billInfo[i]['subject'])
          //   }
          //   if(response.data.billInfo[i]['price'] !== null) {
          //       yData1.push(response.data.billInfo[i]['price']);
          //   }
          //   if(response.data.billInfo[i]['appo_price'] !== null) {
          //       yData2.push(response.data.billInfo[i]['appo_price']);
          //   }
          // }
          console.log(xData)
          console.log(yData1)
          console.log(yData2)
          // 绘制图表
          myChart2.setOption({
            title: {
              text: '各科室收益流水（元）/日'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              data: ['总收益', '挂号收益']
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: xData
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '总收益',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: yData1
              },
              {
                name: '挂号收益',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: yData2
              }
            ]
          })
        }else {
          this.$message({
            message:'获取数据失败',
            type: 'error',
            showClose:true
          })
        }
      });
    },

    drawLine3(){
      // 基于准备好的dom，初始化echarts实例
      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      let data = {
        'days':this.daysForm.days
      }
      let xData = [];
      let yData1 = [];
      let yData2 = [];
      console.log(data)
      daysBillInfo(data,header).then(response => {
        console.log('请求成功',response)
        // let length = response.data.list.length
        if(response.ret == '0'){
          let arr = response.data.list
          arr.forEach((item) => {
            xData.push(item.date);
            yData1.push(item.appo_sum);
            yData2.push(item.sum)
          });
          // for(var i=0; i<length; i++) {
          //   if(response.data.list[i]['date'] != null) {
          //     xData.push(response.data.list[i]['date'])
          //   }
          //   if(response.data.list[i]['appo_sum'] != null) {
          //     yData1.push(response.data.list[i]['appo_sum'])
          //   }
          //   if(response.data.list[i]['sum'] != null) {
          //     yData2.push(response.data.list[i]['sum'])
          //   }
          // }
          console.log(xData)
          console.log(yData1)
          console.log(yData2)
          //绘制图标
          myChart3.setOption({
            title: {
              text: '某时段医院各类收益流水'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {},
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: xData
            },
            series: [
              {
                name: '挂号收益(/元)',
                type: 'bar',
                data: yData1
              },
              {
                name: '总收益(/元)',
                type: 'bar',
                data: yData2
              }
            ]
          })
        }else {
          this.$message({
            message:'获取数据失败',
            type: 'error',
            showClose:true
          })
        }
      })
    },

    drawLine4(){
      // 基于准备好的dom，初始化echarts实例
      let myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      let data = {
        'days':this.daysForm2.days
      }
      let xData = [];
      let yData = [];
      console.log(data)
      daysAppInfo(data,header).then(response => {
        console.log('请求成功',response)
        // let length = response.data.list.length
        if(response.ret == '0'){
          let arr = response.data.list
          arr.forEach((item) => {
            yData.push(item.date)
            xData.push(item.count)
          });
          // for(var i=0; i<length; i++) {
          //   if(response.data.list[i]['date'] != null) {
          //     yData.push(response.data.list[i]['date'])
          //   }
          //   if(response.data.list[i]['count'] != null) {
          //     xData.push(response.data.list[i]['count'])
          //   }
          // }
          console.log(xData)
          console.log(yData)
          //绘制图标
          myChart4.setOption({
            title: {
              text: '某时段医院挂号流水'
            },
              tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: yData
            },
            series: [
              // {
              //   name: '2011',
              //   type: 'bar',
              //   data: [18203, 23489, 29034, 104970, 131744, 630230]
              // },
              {
                name: '挂号人数(/人)',
                type: 'bar',
                data: xData
              }
            ]
          })
        }else {
          this.$message({
            message:'获取数据失败',
            type: 'error',
            showClose:true
          })
        }
      })
    },

    // 获取当前时间
    getDate() {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month; //月小于10，加0
      day = day < 10 ? "0" + day : day; //day小于10，加0
      return `${year}-${month}-${day}`;
    },
  },
}
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.btn .date1{
  display: inline-block;
}
.btn .date2{
  display: inline-block;
}
#myChart1{
  float: left;
}
#myChart2{
  float: right;
}
.days {
  float: left;
}
#myChart3{
  float: left;
}
#myChart4{
  float: left;
}
</style>
